<script lang="ts" setup>
// 根据 tailcss 需要管理主题的变量配置
import {useThemeVars} from "naive-ui";

const themeVars = useThemeVars();
</script>

<template>
  <!--@formatter:off-->
  <component :is="`style`">
    :root {
    --color-primary: {{ themeVars.primaryColor }};
    --color-primary-hover: {{ themeVars.primaryColorHover }};
    --color-primary-pressed: {{ themeVars.primaryColorPressed }};
    --color-primary-suppl: {{ themeVars.primaryColorSuppl }};
    --color-info: {{ themeVars.infoColor }};
    --color-info-hover: {{ themeVars.infoColorHover }};
    --color-info-pressed: {{ themeVars.infoColorPressed }};
    --color-info-suppl: {{ themeVars.infoColorSuppl }};
    --color-success: {{ themeVars.successColor }};
    --color-success-hover: {{ themeVars.successColorHover }};
    --color-success-pressed: {{ themeVars.successColorPressed }};
    --color-success-suppl: {{ themeVars.successColorSuppl }};
    --color-warning: {{ themeVars.warningColor }};
    --color-warning-hover: {{ themeVars.warningColorHover }};
    --color-warning-pressed: {{ themeVars.warningColorPressed }};
    --color-warning-suppl: {{ themeVars.warningColorSuppl }};
    --color-error: {{ themeVars.errorColor }};
    --color-error-hover: {{ themeVars.errorColorHover }};
    --color-error-pressed: {{ themeVars.errorColorPressed }};
    --color-error-suppl: {{ themeVars.errorColorSuppl }};
    }
  </component>
  <!--@formatter:on-->
</template>

<style></style>
